<template>
	<view class="container-wealth">
		<view class="wealth-top">
			{{$t('财富')}}
		</view>
		<view class="head-nav">
				<view class="padding12" :class="navIndex==0?'activite':''" @click="checkIndex(0)">全部</view>
				<view class="padding12"  v-for="(item,index) in cateList"  :class="navIndex==item.id?'activite':''" @click="checkIndex(item.id)">{{item.title}}</view>
		</view>
		<!-- 内容切换 -->
		<view class="content content-product">
			<view v-if="allList.length==0" class="nodetaView">
				<image src="../../static/home/nodeta.png" class="nodetaImg"></image>
				<p class="nodetaText">{{$t('暂无数据')}}</p>
			</view>
			<view v-else class="" v-for="(item,index) in allList" :keys="index">
				<p class="pro-title"> {{item.title}} </p>
				<view class="pro-center">
					<view class="percenter25">
						<image class="productImg" :src="item.pic" mode=""></image>
					</view>
					<view class="percenter25">
						<p class="pro-interest"><span>{{item.rate}}</span>(Rs)</p>
						<p class="pro-interesttext">{{$t('日利')}}</p>
					</view>
					<view class="percenter25">
						<p class="pro-cycle"><span>{{item.day}}</span>天</p>
						<p class="pro-cycletext">{{$t('投资周期')}}</p>
					</view>
					<view class="percenter25">
						<p class="pro-amount">$<span>{{item.min}}</span></p>
						<p class="pro-amounttext">{{$t('起投金额')}}</p>
					</view>
				</view>
				<view class="pro-scale">
					{{$t('项目规模')}}:$<span>{{item.money}}</span>(Rs)
				</view>
				<view class="progressView">
					<view class="progress-box">
						<progress :percent="item.jd" show-info stroke-width="3" />
						
					</view>
					<view class="invest-view" @click="investBtn(item)">
						<p class="invest-btn">{{$t('立即投资')}}</p>
					</view>
				</view>
			</view>
		</view>
		<view class="popuper" v-show="allShow">
			<view class="allMask"></view>
			<view class="popuper-content">
				<p class="pro-title">{{acdata.title}}</p>
				<view class="pro-center">
					<view class="percenter33">
						<p class="pro-interest"><span>{{acdata.rate}}</span>(Rs)</p>
						<p class="pro-interesttext">{{$t('日利')}}</p>
					</view>
					<view class="percenter33">
						<p class="pro-cycle"><span>{{acdata.day}}</span>天</p>
						<p class="pro-cycletext">{{$t('投资周期')}}</p>
					</view>
					<view class="percenter33">
						<p class="pro-amount">$<span>{{acdata.min}}</span></p>
						<p class="pro-amounttext">{{$t('起投金额')}}</p>
					</view>
				</view>
				<!-- <view class="pro-scale">
					$<span>200000.00</span>(Rs)
				</view> -->
				<p class="van-field">
					<input type="text" inputmode="decimal" v-model="num" :placeholder="$t('请输入投资金额')" class="van-field__control">
				</p>
				<view class="btn-bottom">
					<view class="btn-cancel" @click="cancelFirst">
						{{$t('取消')}}
					</view>
					<view class="btn-sure" @click="sureBtnFirst">
						{{$t('确定')}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				allShow:false,
				navIndex: 0,
				pgList:["80%"],
				cateList:[],
				allList:[],
				acdata:{},
				num:""
			}
		},
		onShow() {
			uni.setTabBarItem({// 修改底部导航
				index: 0,
				text: this.$t('home'),
			});
			uni.setTabBarItem({// 修改底部导航
				index: 1,
				text: this.$t('cf'),
			});
			uni.setTabBarItem({// 修改底部导航
				index: 2,
				text: this.$t('hd'),
			});
			uni.setTabBarItem({// 修改底部导航
				index: 3,
				text: this.$t('user'),
			});
		},
		onLoad() {
			this.getcate()
			this.getlist(0)
		},
		methods: {
			sureBtnFirst(){
				this.order(this.acdata.id,this.num)
			},
			// 投资
			order(id,num){
				this.$http.post(
					'api/order/create',//接口名
					{id:id,num:num},//参数合集
				).then(res=>{
					this.cancelFirst()
					uni.showToast({
						icon: 'success',
						title: res.msg
					});
					this.num = ""
					this.acdata = {}
				},(err)=>{//失败的操作
					uni.showToast({
						icon: 'error',
						title: err.data.message
					});
				})
			},
			checkIndex(index) {
				this.navIndex = index;
				this.getlist(index)
			},
			getlist(cate){
				this.$http.get(
					'api/touzi/index',//接口名
					{cate:cate}//参数合集
				).then(res=>{
					this.allList = res.data.data
				},(err)=>{//失败的操作
					uni.showToast({
						icon: 'none',
						title: err.data.message
					});
				})
			},
			getcate(){
				this.$http.get(
					'api/touzi_cate/index',//接口名
					{}//参数合集
				).then(res=>{
					this.cateList = res.data.data
				},(err)=>{//失败的操作
					uni.showToast({
						icon: 'none',
						title: err.data.message
					});
				})
			},
			// 投资按钮
			investBtn(data){
				this.acdata = data
				this.allShow=true;
			},
			cancelFirst(){
				this.allShow=false;
			},
		}
	}
</script>

<style>
	.btn-cancel,.btn-sure{
		width:50%;
		height:96rpx;
		line-height: 96rpx;
	}
	.btn-sure{
		color:red;
	}
	.btn-bottom{
		display: flex;
		justify-content: space-between;
		align-items:center;
		text-align: center;
	}
	.van-field__control {
	    display: block;
	    box-sizing: border-box;
	    width: 100%;
	    min-width: 0;
	    margin: 0;
	    padding: 0;
	    color: #323233;
	    line-height: inherit;
	    text-align: left;
	    background-color: transparent;
	    border: 0;
	    resize: none;
		color: #323233;
		text-align: left;
		font-size: 28rpx;
	}
	.van-field{
		padding: 20rpx;
	}
	.container-wealth {
		background-color: #f6f6f6;
	}
	.wealth-top{
		height:88rpx;
		line-height: 88rpx;
		width:100%;
		text-align: center;
		position: fixed;
		top: 0;
		z-index: 10;
		background: #0a5;
		color:#fff;
		font-size: 18px;
		font-weight: 500;
	}
	.head-nav {
		/* margin:88rpx auto; */
		margin-top:88rpx ;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size:28rpx;
		padding:0 16rpx 30rpx 16rpx;
		height:88rpx;
		line-height: 88rpx;
		/* position: fixed; */
		overflow-x: auto;
		overflow-y: hidden;
		width: 100%;
		white-space: nowrap;
		background-color: #fff;
	}
	.activite {
		color: #0a5;
		border-bottom:2px solid #0a5;
	}
	.head-nav>view {
		/* padding-bottom: 10rpx; */
	}
	.content {
		height: 100%;
		background-color: #fff;
	}
	.padding12{
		padding:0 24rpx;
		
	}
	.productImg{
		width:108rpx;
		height:72rpx;
		margin-top:10rpx;
	}
	.content-product{
		/* margin-top:176rpx; */
	}
	.pro-title{
		border-bottom: 1px solid #ececec;
		padding: 15px 10px;
		margin: 5px 0;
		font-size: 24rpx;
		font-weight:600;
	}
	.pro-center{
		display: flex;
		flex-direction: row;
		text-align: center;
		margin:10rpx;
	}
	.percenter25{
		width:25%;
		font-size:28rpx;
	}
	.pro-interest{
		color:red;
		font-weight:600;
		padding:10rpx 0;
	}
	.pro-cycle,.pro-amount{
		font-weight:600;
	}
	.pro-interesttext,.pro-cycle,.pro-cycletext,.pro-amount,.pro-amounttext{
		padding:10rpx 0;
	}
	.pro-scale{
		padding:10rpx 20rpx;
		margin:10rpx 0;
		color:#999;
		font-size:24rpx;
	}
	.progressView{
		display: flex;
		flex-direction: row;
		padding:10rpx 20rpx;
		margin:10rpx 0;
	}
	.progress-box{
		width:70%;
		height:74rpx;
		line-height: 74rpx;
	}
	.invest-view{
		width:20%;
		
		margin: 10rpx 0;
		margin-left:10%;
	}
	.invest-btn{
		color: #0a5;
		padding: 10rpx 10rpx ;
		border-radius: 10rpx ;
		border: 1px solid #0a5;
		font-size: 24rpx;
		
	}
	.nodetaView{
		text-align: center;
		background-color: #f6f6f6;
		padding:64rpx 0;
	}
	.nodetaImg{
		width:320rpx;
		height:320rpx;
	}
	.nodetaText{
		font-size:28rpx;
		color:#969799;
	}
	.allMask{
		width:100%;
		height:100%;
		background-color: #000;
		opacity: 0.5;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
		
	}
	.percenter33{
		width:33.33%;
	}
	.popuper-content{
		background-color: #fff;
		border-radius: 8px;
		width:300px;
		/* height:210px; */
		position:absolute;
		top:50%;
		left:50%;
		margin-top:-100px;
		margin-left:-150px;
		z-index:4;
	}
</style>
